<script setup lang="ts">
import MdiCardsHeart from '@renderer/components/MdiCardsHeart.vue'
import MdiCardsHeartOutline from '@renderer/components/MdiCardsHeartOutline.vue'
import { useFavoriteStore } from '@renderer/stores/favorite'

import type { FavoriteInfo } from '@renderer/stores/favorite.ts'

defineProps<{ data: FavoriteInfo }>()

const { toggleFavorite, isFavorite } = useFavoriteStore()
</script>

<template>
  <button v-if="isFavorite(data.cid)" @click="toggleFavorite(data)">
    <MdiCardsHeart class="svg-icon" />
  </button>
  <button v-else @click="toggleFavorite(data)">
    <MdiCardsHeartOutline class="svg-icon" />
  </button>
</template>

<style scoped lang="less"></style>
